<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/modules/user'
import { onShow } from '@dcloudio/uni-app'


onShow(() => {
    userInfo.value = useUserStore().getUserInfo()
    age.value = userInfo.value.userAge
    weight.value = userInfo.value.userWeight
    stature.value = userInfo.value.userStature
})

//年龄
const ageArr = ref([])
const age = ref()
for(let i = 12; i <= 90 ; i++){
    ageArr.value.push(i)
}

//身高
const statureArr = ref([])
const stature = ref()
for(let i = 120; i <= 220 ; i++){
    statureArr.value.push(i)
}

//体重
const weightArr = ref([])
const weight = ref()
for(let i = 30; i <= 200 ; i++){
    weightArr.value.push(i)
}
// [年龄, 体重, 身高]
const value = ref([null, null , null])
const indicatorStyle = ref('height: 50px;')

// 用户表单信息集合
const userInfo = ref({
    userAge: age.value,
    userStature: stature.value,
    userWeight: weight.value
})

// 用户信息持久化
const userStore = useUserStore()
//基础信息数据监听
const bindChange = (e) => {
    const val = e.detail.value
    age.value = ageArr.value[val[0]]
    weight.value = weightArr.value[val[1]] 
    stature.value = statureArr.value[val[2]]
    // 表单信息更新
    userInfo.value.userAge = age.value
    userInfo.value.userWeight = weight.value
    userInfo.value.userStature = stature.value
}

// 保存按钮
const saveUserData = async () => {
    await userStore.setUserInfo(userInfo.value)
    uni.showToast({
        title: '保存成功',
        content: '正在跳转回主页面...',
        duration: 2000,
    })
    setTimeout(() => {
        uni.navigateBack()
    }, 2000)
}
// 清除按钮

const alertDialog = ref(null)
const removeUserData = async () => {
    const confirmed = await alertDialog.value.open()
    if(confirmed){
        await userStore.removeUserInfo()
        uni.showToast({
            title: '清除成功',
            content: '正在跳转回主页面...',
            duration: 2000,
        })
        setTimeout(() => {
            uni.navigateBack()
        }, 2000)
    }  
}
</script>

<template>
    <!-- 基础信息 -->
    <div class="baseData">
        <uni-section class="mb-10" title="基础信息" type="line">
            <!-- 性别 -->
            <uni-list>
				<uni-list-item title="性别">
                    <template v-slot:footer>
                        <radio-group>
                            <label><radio value="r1" color="#0052d9" checked="true" />男</label>
                            <label style="margin-left:20px;"><radio value="r2" color="#0052d9" />女</label>
                        </radio-group>
                    </template>
                </uni-list-item>
			</uni-list>
            <!-- 年龄/身高/体重 -->
            <uni-list>
                <uni-collapse >
                    <uni-collapse-item title="年龄/体重/身高" :show-animation="true">
                        <template #titleRight>
                            <p style="font-size: 14px;color: #ccc;margin: auto 0">
                                {{ age }}岁/{{ weight }}公斤/{{ stature }}cm
                            </p>
                        </template>
                        <!-- 下拉滚动选择器 -->
                        <view>
                            <div class="selectTitle">
                                <view class="titleName">年龄</view>
                                <view class="titleName">体重</view>
                                <view class="titleName">升高</view>
                            </div>
                            <div class="pickerSelect">
                                <picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
                                    <picker-view-column>
                                        <view class="item" v-for="item in ageArr" :key="item">{{item}}</view>
                                    </picker-view-column>
                                    <picker-view-column>
                                        <view class="item" v-for="item in weightArr" :key="item">{{item}}</view>
                                    </picker-view-column>
                                    <picker-view-column>
                                        <view class="item" v-for="item in statureArr" :key="item">{{item}}</view>
                                    </picker-view-column>
                                </picker-view>
                            </div>
                        </view>
                    </uni-collapse-item>
                </uni-collapse>
			</uni-list>
            <!-- 基础代谢热量 -->
            <view style="width: 70%;margin: 0 auto;">
                <uni-card :is-shadow="false">
                    <p>基础代谢热量</p>
                    <p>3200大卡</p>
                </uni-card>
            </view>
        </uni-section>
    </div>
    <footer>
        <button class="footerBtn" style="background-color: #0052d9;" @click="saveUserData">保存数据</button>
        <button class="footerBtn" style="background-color: #ddd;" type="warn" @click="removeUserData">清空数据
                <!-- 清除数据提示框 -->
            <uni-popup ref="alertDialog" type="dialog">
                <uni-popup-dialog type="error" cancelText="取消" confirmText="确定" title="警告" content="确定清除个人信息吗?" @confirm="dialogConfirm"
                    @close="dialogClose"></uni-popup-dialog>
            </uni-popup>
        </button>
    </footer>

</template>

<style lang="scss" scoped>
	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}
	.item {
		line-height: 100rpx;
		text-align: center;
	}

    .selectTitle {
        display: flex;
        justify-content: space-around;
        margin-bottom: 20px;
        .titleName {
            font-size: larger;
            color: #0052d9;
        }
    }

    .footerBtn {
        color: #fff;
        width: 70%;
        margin-top: 10px;
    }

</style>